import { install } from "element-plus";
import {useIntersectionObserver} from '@vueuse/core'

// 定义懒加载
export const lazyloadPlugin = {
    install (app) {
        app.directive('img-lazy', {
            mounted (el, binding) {
            // el: 指令绑定的那个元素 -> img
            // binding: binding.value 指令等于号后面绑定的表达式的值 -> 图片url
            const { stop } = useIntersectionObserver(
                el,
                ([{ isIntersecting }]) => {
                    // console.log(isIntersecting)
                    if (isIntersecting) {
                    // 图片进入视口
                    el.src = binding.value
                    stop()
                    }
                },
                )
            }
        })
    }
}